<!--  -->
<template>
  <div>
    <el-select v-model="dataForm[scriptItem.text]"
               filterable
               clearable
               default-first-option>
      <el-option v-for="(o,ii) in selectDataObj[`${scriptItem.text}ListsOrigin`]"
                 :key="ii"
                 :value="o[scriptItem.fieldValue]"
                 :label="o[scriptItem.fieldLabel]">
        <div style="fontWeight:700;">
          <div v-if="comDescriptionWidth(o[scriptItem.fieldLabel])"
               class="description-content" style="color:inherit;">{{ o[scriptItem.fieldLabel] }}</div>
          <el-tooltip :open-delay="1000" v-else
                      :content="o[scriptItem.fieldLabel]"
                      placement="top">
            <div class="description-content" style="color:inherit;">{{ o[scriptItem.fieldLabel] }}</div>
          </el-tooltip>
        </div>
        <template v-if="o[scriptItem.templateLabel]">
          <div v-if="comDescriptionWidth(o[scriptItem.templateLabel])"
               class="description-content">{{ o[scriptItem.templateLabel] }}</div>
          <el-tooltip :open-delay="1000" v-else
                      :content="o[scriptItem.templateLabel]"
                      placement="top">
            <div class="description-content">{{ o[scriptItem.templateLabel] }}</div>
          </el-tooltip>
        </template>
      </el-option>
    </el-select>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'

export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {

    }
  },
  methods: {
    comDescriptionWidth (text) {
      try {
        // return Boolean(document.getElementById(id).clientWidth <= document.getElementById(id).scrollWidth)
        return Boolean(text.length <= 22)
      } catch (error) {
        return false
      }
    }

  }
}
</script>

<style scoped lang='scss'>
.el-select-dropdown__list {
  & > .el-select-dropdown__item {
    height: auto;
  }
  .el-select-dropdown__item.selected {
    font-weight: inherit;
  }
}
.description-content {
  // border: 1px dotted #efefef;
  // border-radius: 4px;
  color: #999;
  max-width: 177px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
